<template>
   <div class="pageone">
     <div class="b1 mr">
       <div class="one1 mr"> one1</div>
       <div class="two1 mr"> two1</div>
     </div>
     <div class="b2 mr">
       <div class="one2 mr">one2</div>
       <div class="two2 mr">two2</div>
     </div>
   </div>
</template>

<script>
export default {
  name: "pageone",
}
</script>

<style scoped>
.pageone{
  display: flex;
  flex-direction: row;
  background-color: #42b983;
}
.b1{
  height: 80vh;
  display: flex;
  flex: 1;
  background-color: pink;
}
.one1{
  flex: 1;
  background-color: bisque;
}
.two1{
  flex: 1;
  background-color: aqua;
}
.b2{
  flex: 1;
  display: flex;
  height: 80vh;
  background-color: yellow;
}
.one2{
  flex: 1;
  background-color: cadetblue;
}
.two2{
  flex: 1;
  background-color: blueviolet;
}
.mr{
  margin: 5px
}
</style>
